<!DOCTYPE>
<html>
    <head>
        <title>积分商城</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no, email=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="HandheldFriendly" content="true">
        <meta name="MobileOptimized" content="640">
        <meta name="screen-orientation" content="portrait">
        <meta name="x5-orientation" content="portrait">
        <meta name="full-screen" content="yes">
        <meta name="x5-fullscreen" content="true">
        <meta name="browsermode" content="application">
        <meta name="x5-page-mode" content="app">
        <meta name="msapplication-tap-highlight" content="no">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta http-equiv="Expires" content="0">
        <meta name="show-image" content="http://www.66play.com/Public/Home/images/con-logo.png">
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/App/mall2/css/common.css" />
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/App/mall2/css/mall.css" />
    </head>
    <body>
        <div class="mall-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper" data-bind="foreach:ads">
                    <div class="swiper-slide">
                        <a href="" class="banner-img" data-bind="attr:{'href':link}">
                            <img src="" data-bind="attr:{'src':image}"/>
                        </a>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="switch-btn">
            <div class="switch-one display-box">
                <p><img src="__PUBLIC__/App/mall2/images/my-integral-icon.png"/></p>
                <span class="box-flexo">
                    <b class="font32">我的积分</b>
                    <em class="font22 gray">剩余 <i class="blue" data-bind="text:score"></i> 分</em>
                </span>
            </div>
            <div class="switch-one display-box" onclick="record()">
                <p><img src="__PUBLIC__/App/mall2/images/record-icon.png"/></p>
                <span class="box-flexo">
                    <b class="font32" onclick="showLog()">兑换记录</b>
                    <em class="font22 gray">瞧瞧都换了什么</em>
                </span>
            </div>
        </div>
        <!--热门兑换-->
        <div class="hot-exchange">
            <h1 class="font22 colorthree relative">热门兑换</h1>
            <!-- ko if:hot().length > 0 -->
            <div class="exchange-wares" style="width: 100%;">
                <!-- ko with:hot()[0] -->
                <div class="exchange-wares-one relative bor-right" data-bind="click:showDetail">
                    <p class="hot-pic">
                        <img src="" data-bind="attr:{'src':image}"/>
                    </p>
                    <span class="hot-title display-box">
                        <span class="hot-title-left box-flexo">
                            <span class="font20 gray" data-bind="text:entity_text"></span>
                            <b class="font22 colorthree" data-bind="text:name"></b>
                        </span>
                        <em class="score back_blue font20 white"><!-- ko text:score --><!-- /ko --> 分</em>
                    </span>
                    <em class="samll-icon font18 white " data-bind="text:type_text"></em>
                </div>
                <!-- /ko -->
                <div class="exchange-wares-one" data-bind="foreach:hot">
                    <!-- ko if:$index() > 0 -->
                    <div class="exchange-wares-one-top display-box" data-bind="click:showDetail">
                        <p class="hot-top-title font20 box-flexo">
                            <em class="samll-icon font18 white " data-bind="text:type_text"></em>
                            <span class="gray" data-bind="text:name"></span>
                            <span class="colorthree"></span>
                            <em class="score back_blue font20 white"><!-- ko text:score --><!-- /ko --> 分</em>
                        </p>
                        <p class="this-pic">
                            <img src="" data-bind="attr:{'src':image}"/>
                        </p>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
            <!-- /ko -->
        </div>
        <!--精选商品-->
        <div class="hot-exchange">
            <h1 class="font22 colorthree relative">精选商品</h1>
            <div class="exchange-wares" data-bind="foreach:recomd">
                <div class="exchange-wares-one relative bor-btm" data-bind="click:showDetail, css:{'bor-right':$index()%2==0}">
                    <p class="hot-pic">
                        <img src="" data-bind="attr:{'src':image}"/>
                    </p>
                    <span class="hot-title display-box">
                        <span class="hot-title-left box-flexo">
                            <span class="font20 gray" data-bind="text:entity_text"></span>
                            <b class="font22 colorthree" data-bind="text:name"></b>
                        </span>
                        <em class="score back_blue font20 white"><!-- ko text:score --><!-- /ko --> 分</em>
                    </span>
                    <em class="samll-icon font18 white " data-bind="text:type_text"></em>
                </div>
            </div>
        </div>
    <script type="text/javascript" src="__PUBLIC__/App/mall2/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/App/mall2/js/knockout-2.3.0.js"></script>
    <script type="text/javascript" src="__PUBLIC__/App/mall2/js/swiper.min.js"></script> 
    <script type="text/javascript" src="__PUBLIC__/App/mall2/js/plugin.js"></script> 
    <!-- Initialize Swiper -->
    <script>
        $(function(){
            viewModel = {
                score : ko.observable(0),
                ads : ko.observableArray([]),
                hot : ko.observableArray([]),
                recomd : ko.observableArray([]),
            };
            ko.applyBindings(viewModel);
            $.get("{:U('AjaxMall/index', ['appToken' => $appToken])}", function(data) {
                if (data.status == 1) {
                    var ads = data.data.ads;
                    viewModel.ads(ads);

                    var user = data.data.user;
                    viewModel.score(user.score);

                    var hot = data.data.hot;
                    var recomd = data.data.recomd;
                    viewModel.hot(getGift(hot));
                    viewModel.recomd(getGift(recomd));

                    var swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        spaceBetween: 30,
                        centeredSlides: true,
                        autoplay: 2500,
                        autoplayDisableOnInteraction: false
                    });
                }
            });
        });
        
        var getGift = function(data) {
            var list = [];
            $.each(data, function(index, el) {
                var gift = {
                    id : el.id,
                    image : el.pics[0],
                    name : el.name.substr(0, 8),
                    entity_text : el.entity_text,
                    type_text : el.type_text,
                    score : el.score,
                    showDetail : function(obj, e) {
                        location.href = "{:U('mall/show')}?id=" + obj.id;
                    }
                };
                list.push(gift);
            });
            return list;
        }

        function showLog() {
            location.href = "{:U('mall/log')}";
        }
    </script>
    </body>
</html>